<template>
    <div>
        <a-row>
            <a-col :span="6">
                <span><b>Regions选择:</b></span>
                <a-select :defaultValue="regions[0]" style="width: 60%;">
                    <a-select-option v-for="(item,index) in regions" :key="index"
                                     :value="item" @click="onChange">
                        {{item}}
                    </a-select-option>
                </a-select>
            </a-col>
            <a-col :span="12" v-if="keys!=null">
                <span><b>Keys选择:</b></span>
                <a-select :defaultValue="keys[0]" style="width: 60%;">
                    <a-select-option v-for="(item,index) in keys" :key="index"
                                     :value="item" @click="onChangeK(item,index)">
                        {{item}}
                    </a-select-option>
                </a-select>
            </a-col>
            <a-col :span="4" v-if="currentValue!=null">
                <span><b>value:</b></span>
                <a-input style="width: 80%" :value="currentValue"/>
            </a-col>
        </a-row>
        <a-row>
            <a-col style="margin-top: 20px">
                <a-card title="设置cache">
                    <a-col :span="8" offset="8">
                        <a-form-item>
                            <a-input placeholder="请输入region"></a-input>
                        </a-form-item>
                        <a-form-item>
                            <a-input placeholder="请输入key"></a-input>
                        </a-form-item>
                        <a-form-item>
                            <a-input placeholder="请输入value"></a-input>
                        </a-form-item>
                        <a-button typeof="primary" @click="send">保存</a-button>
                    </a-col>
                </a-card>
            </a-col>
        </a-row>
    </div>
</template>

<script>
    import ACol from "ant-design-vue/es/grid/Col";

    const fakekeys = ["name", "age", "goods"];
    const fakevalues = [
        {
            key: "name",
            value: "zhanghanlin"
        },
        {
            key: "age",
            value: "22"
        },
        {
            key: "goods",
            value: "rice"
        }
    ];
    export default {
        name: "Cache",
        components: {ACol},
        methods: {
            onChange(value) {
                // eslint-disable-next-line no-console
                console.log(value);
                this.keys = fakekeys;
            },
            onChangeK(value, index) {
                // eslint-disable-next-line no-console
                console.log(value, index);
                this.values = fakevalues;
                // eslint-disable-next-line no-console
                console.log(this.values);
                this.currentValue = this.values[index].value;
                // eslint-disable-next-line no-console
                console.log(this.currentValue);
            },
            send() {
                this.$message.success("提交成功")
            },
            getRegions() {
                this.$api.get('cache/regions', {}, res => {
                    // eslint-disable-next-line no-console
                    console.log('cache',res);
                   // this.regions = res.data;
                })
            }
        },
        data() {
            return {
                regions: ["Users", "default"],
                keys: null,
                values: null,
                currentValue: null,
            }
        },
        mounted() {
            this.getRegions();
        }
    }
</script>

<style scoped>

</style>